<template>
  <div>
    <div style="font-size:18px;">用户列表</div>
    <hr>
    <br>
    <div class="filter-container">
      <el-select clearable v-model="listQuery.param.schoolId"
      placeholder="请选择学校">
          <el-option
          v-for="item in schoolOptions"
          :key="item.id"
          :label="item.name"
          :value="item.id">
          </el-option>
      </el-select>    
      <el-input @keyup.enter.native="handleFilter" style="width: 180px;" class="filter-item" placeholder="手机号" v-model.trim="listQuery.param.username">
      </el-input>
      <el-input @keyup.enter.native="handleFilter" style="width: 180px;" class="filter-item" placeholder="用户名" v-model.trim="listQuery.param.nickname">
      </el-input>
      <el-date-picker
        style="width: 200px;display: inline-block;"
        v-model="listQuery.param.startTime"
        type="date"
        placeholder="选择开始时间">
      </el-date-picker>
      <el-date-picker
        style="width: 200px;display: inline-block;"
        v-model="listQuery.param.endTime"
        type="date"
        placeholder="选择结束时间">
      </el-date-picker>
      <el-button class="filter-item" style="margin-left: 30px;" type="primary"  icon="search" @click="handleFilter">搜索</el-button>
    </div>
    <el-table :data="tableData" stripe border style="width: 100%">
      <!-- <el-table-column type="expand">
        <template scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="真实姓名:" >
              <span>{{props.row.realName}}</span>
            </el-form-item>
            <el-form-item label="性别:">
              <span>{{props.row.sex}}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column> -->
      <el-table-column prop="nickname" label="用户名" width="160"></el-table-column>
      <el-table-column label="用户图像" min-width="156spx">
        <template scope="scope">
          <img :src="scope.row.headimgurl" width="100" height="100">
        </template>
      </el-table-column>
      <el-table-column prop="username" label="手机号" width="180"></el-table-column>
      <el-table-column label="所属学校" min-width="160spx">
        <template scope="scope"> 
          <!-- <span>{{scope.row.schoolId}}</span> -->
          <span>{{scope.row.schoolId | filterSchool}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="score" label="积分" align="center" width="100">
      </el-table-column>
      <el-table-column prop="createDateName" label="创建时间" width="220">
      </el-table-column>
      <el-table-column align="center" label="操作" width="160">
        <template scope="scope">
          <!-- <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button> -->
          <el-button size="small" v-if="scope.row.state==1" type="danger" @click="handleDelete(scope.row,scope.$index,0)">拉黑</el-button>
          <el-button size="small" v-else type="success" @click="handleDelete(scope.row,scope.$index,1)">恢复</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
         @size-change="handleSizeChange"
         @current-change="handleCurrentChange"
         :current-page="listQuery.pageNumber"
         :page-sizes="[10, 20, 50]"
         :page-size="listQuery.pageSize"
         layout="total, sizes, prev, pager, next, jumper"
         :total="total">
      </el-pagination>
    </div>

  </div>
</template>
<script>
    import $ from 'jquery';
    import Vue from 'vue';
  var schoolList
  export default {
    data() {
        return {
            total: 1,
            schoolOptions: [],
            listQuery: {
              pageNumber: 1,
              pageSize: 10,
              param: {
                username: '',
                nickname: '',
                realName: '',
                schoolId: '',
                startTime: null,
                endTime: null,
              },
            },
            labelPosition: 'right',
            tableData: []
        };
    },
    filters: {
      filterSchool(val) {
        for (let i in schoolList) {
          if(val==schoolList[i].id){
            return schoolList[i].name
          }
        }
      },
    },
    mounted(){
        this.getschoollist();
        this.getData()
    },
    methods: {
      handleCurrentChange(val){
          this.listQuery.pageNumber = val
          this.getData();
      },
      handleSizeChange(val){
          this.listQuery.pageSize = val
          this.getData();
      },
      handleFilter(){
          this.listQuery.pageNumber = 1
          this.getData()
      },
      getschoollist(){
          let self = this;
          let _data = {
              pageNumber: 1,
              pageSize: 10000,
          }
          self.myajax("/school/list",_data,function(res){
              // console.log(res)
              if(res.code==1000){
                  schoolList = self.schoolOptions=res.data.list;
              }
          });
      },
      getData() {
        let self=this;
        this.myajax("/user_entity/list",this.listQuery,res=>{
          if(res.code == 1000){
            console.log(res)
            self.tableData = res.data.list
            self.total = res.data.total
          }
        })
      },
      handleDelete(row,index,state) {
        console.log(row);
        let self = this
        let confirmText
        if(state==1) {
          confirmText = '此操作将恢复该用户, 是否继续?'
        }else{
          confirmText = '此操作将拉黑该用户, 是否继续?'
        }
        this.$confirm(confirmText, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          self.myajax("/user_entity/update",{id:row.id,state: state},(res)=>{
            console.log(res)
            if(res.code==1000){
              // self.getData()
              self.tableData[index].state = state
              self.$message({
                type: 'success',
                message: '操作成功!',
                duration: 1000
              });
            }
          })
        }).catch(() => {
        
        }); 
      },
    }
  };
</script>
<style scoped>
    .input_edit{
        width: 200px;
        float: left;
        margin-right:10px;
    }
    .cell{
        padding: 0 5px !important;
        overflow: auto;
    }
    .el-input-number .el-input__inner {
      padding: 3px 36px;
      text-align: center;
    }
    /*.el-form-item {
      margin-bottom: 0;
    }*/
    .el-form-item__label{
      margin-right: 20px;
    }
    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }
    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 49%;
    }
    .el-form--inline .el-form-item {
        display: inline-block;
        vertical-align: top;
    }
    .table_container{
        padding: 20px;
    }
    /*.el-form--inline .el-form-item .el-form-item__content{
      display: block;
    }*/
</style>
